﻿
//列表模板
document.write('<script type="text/html" id="Item"><div class="items"><div class="outer-container"><div class="inner-container"><div class="content"><div class="list-group">{{each list data}}<a href="#" class="list-group-item" data-id="{{data.Id}}">{{data.TypeName}}<i class="icon icon-caret-right"></i></a>{{/each}}</div></div></div></div></div></script>');

$.fn.enrichGropDown = function (options) {
    var $this;//绑定的对象
    //给对应的下拉框初始化一个隐藏选项用来放每次选择的值
    $(".enrich-drop-down").html('<option style="display:none;"></option>');
    if (options.type == 2) {
        $.each(options.data, function (i, item) {
            if (item.Id == options.value) {
                $(".enrich-drop-down").find("option").first().attr("value", item.Id);
                $(".enrich-drop-down").find("option").first().html(item.TypeName);
            }
        });
    }
    //点击对象时触发
    $(this).click(function () {
        $this = this;
	    //初始化div框的位置和内容
        LoadHtml();
	});
    //初始化选择框
	function LoadHtml()
	{
	    var obj = $($this);
	    var offset = obj.offset();
	    var left = offset.left;
	    var leftBottom = offset.top + obj.height() + 12;

	    var html = '<div id="enrichGropDown" style="top:' + leftBottom + 'px !important; left: ' + left + 'px !important;"><div>';
	    html += '<div class="input-control search-box has-icon-left has-icon-right" id="searchboxExample">';
	    html += '  <input id="searchInputExample" type="search" class="form-control search-input" placeholder="搜索">';
	    html += '  <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>';
	    html += '  <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>';
	    html += '</div>';
	    html += template("Item", { list: GetItemData({ pid: 0 }) });
	    html += '</div></div>';

	    $("#enrichGropDown").remove();//每次删除框元素
	    $("body").append(html);//绑定框元素

        //绑定搜索框内容改变监听事件
	    $("#searchInputExample").watch(function (value) {
	        var _html = template("Item", { list: GetItemData({ pid: 0, name: value }) });
	        $(".items").remove();
	        $("#searchboxExample").after(_html);
	        LoadHtmlStyleAndScript();
	    });
        //绑定搜索框的清空按钮事件
	    $(".search-clear-btn").click(function () { $("#searchInputExample").val(""); LoadHtml(); });
	    LoadHtmlStyleAndScript();
	}
    //初始化列表项的点击事件
	function LoadHtmlStyleAndScript()
	{
        //列表项点击事件绑定
	    $(".list-group-item").click(function () {
	        SearchSeedItem(this);
	    });
        //当点击非元素框的时候关闭元素框
	    $(document).on('click', function (e) {
	        var pobj = $(e.target).parents("#enrichGropDown")[0];
	        if (e.target.id != "enrichGropDown" && e.target.className.indexOf("enrich-drop-down") <= 0 && (pobj == undefined || (pobj == undefined && pobj.id != "enrichGropDown"))) {
	            $("#enrichGropDown").remove();
	            return;
	        }
	    });
	}

	function SearchSeedItem($this) {
		var obj = $($this);
		var id = obj.data("id");
		obj.parents(".items").find(".action").removeClass("action");
		obj.addClass("action");
		obj.parents(".items").nextAll(".items").each(function () { $(this).html(""); $(".enrich-drop-down").find("option").first().html(""); });
		var html = template("Item", { list: GetItemData({ pid: id }) });
		if (html!=undefined) {
		    obj.parents(".items").after(html);
		    obj.parents(".items").next(".items").find(".list-group-item").click(function () { SearchSeedItem(this); });
		}
        //$(".enrich-drop-down").data("value", id);
        $(".enrich-drop-down").find("option").first().attr("value",id);
		$(".enrich-drop-down").find("option").first().html(obj.html());
	}

    //获取当前选择对象的子列表数据
	function GetItemData(obj) {
	    var dataTemporary = [];
	    $.each(options.data, function (i, item) {
	        var isSearch=0;//当有搜索条件时筛选
	        if (obj.name != undefined && obj.name!="" && item[options.search].indexOf(obj.name)<0) {
	            isSearch = 1;
	        }
	        if (item.PId == obj.pid && isSearch==0) {
	            dataTemporary.push(item);
	        }
	    });
	    return dataTemporary;
	}
}
//监听搜索框内容改变
$.fn.watch = function (callback) {
    return this.each(function () {
        //缓存以前的值  
        $.data(this, 'originVal', $(this).val());

        //event  
        $(this).on('keyup paste', function () {
            var originVal = $.data(this, 'originVal');
            var currentVal = $(this).val();

            if (originVal !== currentVal) {
                $.data(this, 'originVal', $(this).val());
                callback(currentVal);
            }
        });
    });
}